<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>webpack D1 | Hexo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="小记：现在 web 开发有着一些不方便的时候。比如文件依赖关系错综复杂、静态资源请求效率低、模块化支持不好、浏览器对高级 JavaScript 特性兼容程度低等问题。   使用 webpack1 . 在使用 webpack 之前，先 npm init 生成 package.json 文件2 . 安装 webpack 和 webpack-cli，npm install webpack webp">
<meta property="og:type" content="article">
<meta property="og:title" content="webpack D1">
<meta property="og:url" content="http://dsjerry.gitee.io/mousejerry/2020/04/18/webpack-D1/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="小记：现在 web 开发有着一些不方便的时候。比如文件依赖关系错综复杂、静态资源请求效率低、模块化支持不好、浏览器对高级 JavaScript 特性兼容程度低等问题。   使用 webpack1 . 在使用 webpack 之前，先 npm init 生成 package.json 文件2 . 安装 webpack 和 webpack-cli，npm install webpack webp">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://dsjerry.gitee.io/mousejerry/2020/04/18/images/webpack.png">
<meta property="article:published_time" content="2020-04-18T14:10:03.000Z">
<meta property="article:modified_time" content="2020-07-21T09:00:33.336Z">
<meta property="article:author" content="smalljerry">
<meta property="article:tag" content="vue">
<meta property="article:tag" content="webpack">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://dsjerry.gitee.io/mousejerry/2020/04/18/images/webpack.png">
    

    
        <link rel="alternate" href="/" title="Hexo" type="application/atom+xml" />
    

    
        <link rel="icon" href="/mousejerry/css/images/ghaseminya.png" />
    

    
<link rel="stylesheet" href="/mousejerry/libs/font-awesome/css/font-awesome.min.css">

    
<link rel="stylesheet" href="/mousejerry/libs/open-sans/styles.css">

    
<link rel="stylesheet" href="/mousejerry/libs/source-code-pro/styles.css">


    
<link rel="stylesheet" href="/mousejerry/css/style.css">


    
<script src="/mousejerry/libs/jquery/2.1.3/jquery.min.js"></script>

    
    
        
<link rel="stylesheet" href="/mousejerry/libs/lightgallery/css/lightgallery.min.css">

    
    
        
<link rel="stylesheet" href="/mousejerry/libs/justified-gallery/justifiedGallery.min.css">

    
    
    
    


<meta name="generator" content="Hexo 5.0.0"></head>

<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/mousejerry/" id="logo">
                <i class="logo"></i>
                <span class="site-title">Hexo</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/mousejerry/.">首页</a>
                
                    <a class="main-nav-link" href="/mousejerry/archives">归档</a>
                
                    <a class="main-nav-link" href="/mousejerry/categories">分类</a>
                
                    <a class="main-nav-link" href="/mousejerry/tags">标签</a>
                
                    <a class="main-nav-link" href="/mousejerry/about">关于</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="https://avatars2.githubusercontent.com/u/53891546?s=460&amp;u=6f987551976f2fcd6f2f49ab5b714fb72671f902&amp;v=4" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/mousejerry/',
        CONTENT_URL: '/mousejerry/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/mousejerry/js/insight.js"></script>


</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/mousejerry/.">首页</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/archives">归档</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/categories">分类</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/tags">标签</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/about">关于</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="https://avatars2.githubusercontent.com/u/53891546?s=460&amp;u=6f987551976f2fcd6f2f49ab5b714fb72671f902&amp;v=4" />
            <h2 id="name">SmallJerry</h2>
            <h3 id="title">————</h3>
            <span id="location"><i class="fa fa-map-marker"></i>Mar</span>
            <a id="follow" target="_blank" href="https://github.com/dsjerry">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                18
                <span>文章</span>
            </div>
            <div class="article-info-block">
                18
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/dsjerry" target="_blank" title="github" class=tooltip>
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/mousejerry/" target="_blank" title="rss" class=tooltip>
                            <i class="fa fa-rss"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-webpack-D1" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            webpack D1
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/mousejerry/2020/04/18/webpack-D1/">
            <time datetime="2020-04-18T14:10:03.000Z" itemprop="datePublished">2020-04-18</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/mousejerry/categories/%E8%87%AA%E5%B7%B1%E5%AD%A6%E4%B9%A0/">自己学习</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link-link" href="/mousejerry/tags/vue/" rel="tag">vue</a>, <a class="tag-link-link" href="/mousejerry/tags/webpack/" rel="tag">webpack</a>, <a class="tag-link-link" href="/mousejerry/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <!-- @format -->

<blockquote>
<p>小记：现在 web 开发有着一些不方便的时候。比如文件依赖关系错综复杂、静态资源请求效率低、模块化支持不好、浏览器对高级 JavaScript 特性兼容程度低等问题。</p>
</blockquote>
<!-- prettier-ignore-start -->
<h2 id="使用-webpack"><a href="#使用-webpack" class="headerlink" title="使用 webpack"></a>使用 webpack</h2><p>1 . 在使用 webpack 之前，先 <code>npm init</code> 生成 <em>package.json</em> 文件<br>2 . 安装 webpack 和 webpack-cli，<code>npm install webpack webpack-cli -D</code><br>3 . 在根目录创建配置文件 <em>webpack.config.js</em> ，初始话配置文件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">&quot;development&quot;</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<a id="more"></a>

<blockquote>
<p>其中 <em>mode</em> 用来指定构建模式 <em>development</em> 模式不会压缩代码，<em>production</em> 模式则会压缩代码，体积小一些</p>
</blockquote>
<p>4 . 在 package.json 配置文件中的 <em>script</em> 节点下增加 <em>dev</em> 脚本</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">    &quot;dev&quot;: &quot;webpack&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><em>scripts</em> 节点下的脚本，可以使用 <em>$ npm run</em> 来执行。比如这里是 <em>$ npm run dev</em> <code>下面有更改</code></p>
</blockquote>
<p>这样一个简单的 webpack 打包就完成了，打包默认生成的文件是 <code>main.js</code></p>
<hr>
<h2 id="配置-webpack"><a href="#配置-webpack" class="headerlink" title="配置 webpack"></a>配置 webpack</h2><p>1 . 配置打包的入口和出口（处理打包的文件）。在 <em>webpack.config.js</em> 中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: path.join(__dirname, <span class="string">&quot;要打包的文件路径及文件&quot;</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: path.join(__dirname, <span class="string">&quot;./dist&quot;</span>), <span class="comment">// 文件输出路径</span></span><br><span class="line">        filename: <span class="string">&quot;bundle.js&quot;</span>, <span class="comment">// 输出的文件名（不是固定名称）</span></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>2 . webpack 自动打包，修改后保存，自动刷新文件，比如 css。使用 <code>npm install webpack-dev-server -D</code> 安装自动打包工具。</p>
<p>在 <em>webpack.config.js</em> 中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">devServer: &#123;</span><br><span class="line">    contentBase: <span class="string">&quot;./dist&quot;</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在 <em>package.json</em> 中</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;start&quot;: &quot;webpack-dev-server --open&quot;</span><br></pre></td></tr></table></figure>

<p>其中</p>
<ul>
<li><p><code>--open</code> 表示打包创建服务器后自动打开浏览器。</p>
</li>
<li><p><code>--host</code> 配置 IP 地址</p>
</li>
<li><p><code>--port</code> 配置端口</p>
</li>
</ul>
<blockquote>
<p>“webpack-dev-server –open –host 127.0.0.1 –port 8080”</p>
</blockquote>
<p>3 . 这样配置后，启动服务器默认打开的是一个路径，要修改器默认打开的页面</p>
<ul>
<li><p><code>npm install html-webpack-plugin -D</code> 安装生成预览页面的插件。</p>
</li>
<li><p>在 <em>webpack.config.js</em> 文件中</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>); <span class="comment">// 导入模块，得到一个构造函数</span></span><br><span class="line"><span class="keyword">const</span> htmlPlugin = <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">    template: <span class="string">&quot;要制定的模板文件&quot;</span>,</span><br><span class="line">    filename: <span class="string">&quot;index.html&quot;</span>, <span class="comment">// 该文件生成在内存中，在目录不会显示出来</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<ul>
<li>在 <em>webpack.config.js</em> 的暴露中添加配置节点</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    plugins: [htmlPlugin],</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><em>plugins</em> 数组是 <em>webpack</em> 打包期间会用到的一些插件列表</p>
</blockquote>
<hr>
<h2 id="webpack-中的加载器"><a href="#webpack-中的加载器" class="headerlink" title="webpack 中的加载器"></a>webpack 中的加载器</h2><h3 id="通过-loader-打包非-js-模块"><a href="#通过-loader-打包非-js-模块" class="headerlink" title="通过 loader 打包非 js 模块"></a>通过 <em>loader</em> 打包非 js 模块</h3><ul>
<li><p>webpack 默认只能处理 <code>.js</code> 结尾的模块，所以要想打包其他类型的文件，需要调用 <code>loader</code> 加载器</p>
</li>
<li><p>webpack 打包处理过程：</p>
<p>  <img src="../images/webpack.png" alt="alt webpack process"></p>
</li>
</ul>
<h4 id="1-打包-css-文件"><a href="#1-打包-css-文件" class="headerlink" title="1. 打包 css 文件"></a>1. 打包 <em>css</em> 文件</h4><ul>
<li><p><code>npm install style-loader css-loader -D</code> 安装 <em>css</em> 文件 loader</p>
</li>
<li><p>在 <em>webpack.config.js</em> 中的 <em>module</em> 中 配置 _rules_，添加匹配规则</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">        &#123;<span class="attr">test</span>: <span class="regexp">/\.css$/</span>, use: &#123;<span class="string">&quot;style-loader&quot;</span>, <span class="string">&quot;css-loader&quot;</span>&#125;&#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>其中 test 标识文件类型，use 标识要使用的 loader<br>loader 是有顺序的，从右往左，是依赖关系</p>
</blockquote>
<h4 id="2-打包-less-文件"><a href="#2-打包-less-文件" class="headerlink" title="2. 打包 less 文件"></a>2. 打包 <em>less</em> 文件</h4><ul>
<li><p><code>npm install less-loader -D</code></p>
</li>
<li><p>匹配规则</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">        &#123;<span class="attr">test</span>: <span class="regexp">/\.less$/</span>, use: &#123;<span class="string">&quot;style-loader&quot;</span>, <span class="string">&quot;css-loader&quot;</span>, <span class="string">&quot;less-loader&quot;</span>&#125;&#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意，使用 <em>less</em> 之前要先安装 less。<code>npm install less</code> &gt; <em>less-loader</em> 要依赖于 <em>css-loader</em></p>
</blockquote>
<p><em>less</em> 的格式：</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: darkcyan;</span><br><span class="line">    <span class="selector-tag">ul</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">23px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="3-打包处理-scss-文件"><a href="#3-打包处理-scss-文件" class="headerlink" title="3. 打包处理 scss 文件"></a>3. 打包处理 <em>scss</em> 文件</h4><ul>
<li><code>npm install sass-loader node-sass -D</code> ，安装的时候是 <em>sass_，但后缀名是 _scss</em></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">        &#123;<span class="attr">test</span>: <span class="regexp">/\.scss$/</span>, use: &#123;<span class="string">&quot;style-loader&quot;</span>, <span class="string">&quot;css-loader&quot;</span>, <span class="string">&quot;scss-loader&quot;</span>&#125;&#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="4-配置-postCSS-自动添加-css-的浏览器兼容前缀"><a href="#4-配置-postCSS-自动添加-css-的浏览器兼容前缀" class="headerlink" title="4. 配置 postCSS 自动添加 css 的浏览器兼容前缀"></a>4. 配置 <em>postCSS</em> 自动添加 css 的浏览器兼容前缀</h4><ul>
<li><code>npm i postcss-loader autoprefixer -D</code></li>
<li>根目录创建 <code>postcss.config.js</code> 文件，配置：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> autoprefixer = <span class="built_in">require</span>(<span class="string">&quot;autoprefixer&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    plugins: [autoprefixer], <span class="comment">// 挂载插件</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>在 <em>webpack.config.js</em> 中添加匹配规则，依赖于 css：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">        &#123;<span class="attr">test</span>: <span class="regexp">/\.scss$/</span>, use: &#123;<span class="string">&quot;style-loader&quot;</span>, <span class="string">&quot;css-loader&quot;</span>, <span class="string">&quot;postcss-loader&quot;</span>&#125;&#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="5-打包图片和字体"><a href="#5-打包图片和字体" class="headerlink" title="5. 打包图片和字体"></a>5. 打包图片和字体</h4><ul>
<li><code>npm i url-loader file-loader -D</code></li>
<li>在 <em>webpack.config.js</em> 中添加匹配规则:</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">        &#123; <span class="attr">test</span>: <span class="regexp">/\.jpg|png|gif|bmp|ttf|svg$/</span>, use: <span class="string">&quot;url-loader?limit=10000&quot;</span> &#125;,</span><br><span class="line">    ];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>这里不需要其他的 loader 支持，所以不用引入。一个值时可以吧数组去掉<br><code>?</code> 之后是 loader 的参数， <em>limit</em> 指定图片的大小，单位是字节，当张片小于 limit 的时候，图片会被转化 wei <code>base64</code>，（图片 url 改变了）</p>
</blockquote>
<h4 id="6-打包处理-js-中的高级语法"><a href="#6-打包处理-js-中的高级语法" class="headerlink" title="6. 打包处理 js 中的高级语法"></a>6. 打包处理 js 中的高级语法</h4><ul>
<li>安装 <code>babel</code> 转换器相关的包：<code>npm i babel-loader @babel/core @babel/runtime -D</code></li>
<li>安装 <code>babel</code> 语法插件相关的包：<code>npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D</code></li>
<li>在根目录创建 <em>babel</em> 配置文件 <code>babel.config.js</code>，配置：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    presets: [<span class="string">&quot;@babel/preset-env&quot;</span>],</span><br><span class="line">    plugins: [</span><br><span class="line">    <span class="string">&quot;@babel/plugin-transform-runtime&quot;</span>,</span><br><span class="line">        <span class="string">&quot;@babel/plugin-proposal-class-properties&quot;</span>,</span><br><span class="line">    ],</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<ul>
<li>在 <em>webpack.config.js</em> 中，添加 loader 规则：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="attr">test</span>: <span class="regexp">/\.js$/</span>, use: <span class="string">&quot;babel-loader&quot;</span>, <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><em>exclude</em> 表示在 <em>babel-loader</em> 处理的时候要排除的文件</p>
</blockquote>
<h4 id="7-webpack-中使用-Vue"><a href="#7-webpack-中使用-Vue" class="headerlink" title="7. webpack 中使用 Vue"></a>7. webpack 中使用 Vue</h4><ul>
<li><code>$ npm install vue -S</code></li>
<li>在入口文件 <code>index.js</code> 中，<strong>import Vue from “vue”</strong> 导入 Vue</li>
<li>创建 vue 实例对象</li>
<li>组件中要有一个根组件，<strong>App.vue</strong></li>
<li>使用 <code>render</code> 函数渲染 APP 根组件</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&quot;./components/App.vue&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">&quot;#app&quot;</span>,</span><br><span class="line">    render: <span class="function">(<span class="params">h</span>) =&gt;</span> h(App),</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<ul>
<li>App.vue 和其路径是根据情况而定</li>
<li>webpack 打包 vue，使用 <strong>render</strong> 函数渲染，在局部中不使用 <strong>components</strong>，这是因为 webpack 中导入的 vue 不是完整的 vue</li>
</ul>
<blockquote>
<p><code>render</code> 函数：</p>
</blockquote>
<h4 id="8-webpack-配置-Vue-单文件组件-loader"><a href="#8-webpack-配置-Vue-单文件组件-loader" class="headerlink" title="8. webpack 配置 Vue 单文件组件 loader"></a>8. webpack 配置 Vue 单文件组件 loader</h4><!-- prettier-ignore -->
<ul>
<li><code>npm i vue-loader vue-template-compiler -D</code></li>
<li>在 <em>webpack.config.js</em> 中，添加 loader 规则：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> VueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&quot;vue-loader/lib/plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123; <span class="attr">test</span>: <span class="regexp">/\.vue$/</span>, loader: <span class="string">&quot;vue-loader&quot;</span> &#125;],</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [<span class="keyword">new</span> VueLoaderPlugin()],</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="9-webpack-打包发布"><a href="#9-webpack-打包发布" class="headerlink" title="9. webpack 打包发布"></a>9. webpack 打包发布</h4><p>上线之前要通过 webpack 将应用进行整体打包，在 <strong>package.json</strong> 中:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">    &quot;build&quot;: &quot;webpack -p&quot;,</span><br><span class="line">    &quot;start&quot;: &quot;webpack-dev-server --open&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><strong>build</strong> 用于打包命令<br><strong>start</strong> 用于开发调试命令</p>
</blockquote>
<!-- prettier-ignore-end -->

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



    <div class="a2a_kit a2a_default_style">
    <a class="a2a_dd" target="_blank" rel="noopener" href="https://www.addtoany.com/share">分享到</a>
    <span class="a2a_divider"></span>
    <a class="a2a_button_wechat" title="微信"></a>
    <a class="a2a_button_sina_weibo" title="微博"></a>
    <a class="a2a_button_email" title="邮件"></a>
    <a class="a2a_button_qzone" title="QQ空间"></a>
    <!--    <a class="a2a_button_pinterest"></a>-->
<!--    <a class="a2a_button_tumblr"></a>-->
</div>
<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
<style>
    .a2a_menu {
        border-radius: 4px;
    }
    .a2a_menu a {
        margin: 2px 0;
        font-size: 14px;
        line-height: 16px;
        border-radius: 4px;
        color: inherit !important;
        font-family: 'Microsoft Yahei';
    }
    #a2apage_dropdown {
        margin: 10px 0;
    }
    .a2a_mini_services {
        padding: 10px;
    }
    a.a2a_i,
    i.a2a_i {
        width: 122px;
        line-height: 16px;
    }
    a.a2a_i .a2a_svg,
    a.a2a_more .a2a_svg {
        width: 16px;
        height: 16px;
        line-height: 16px;
        vertical-align: top;
        background-size: 16px;
    }
    a.a2a_i {
        border: none !important;
    }
    a.a2a_menu_show_more_less {
        margin: 0;
        padding: 10px 0;
        line-height: 16px;
    }
    .a2a_mini_services:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .a2a_mini_services{*+height:1%;}
</style>


</div>

            
    
        <a href="http://dsjerry.gitee.io/mousejerry/2020/04/18/webpack-D1/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://dsjerry.gitee.io/mousejerry/2020/04/18/webpack-D1/">评论</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/mousejerry/2020/05/18/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    微信小程序 - 一些基础
                
            </div>
        </a>
    
    
        <a href="/mousejerry/2020/04/03/%E8%87%AA%E5%AD%A6Vue-%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">组件基础</div>
        </a>
    
</nav>


    
</article>


    
    <section id="comments">
    
        
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a target="_blank" rel="noopener" href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>

    
    </section>

</section>
            
                <aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="/mousejerry/tags/PHP/" style="font-size: 13.33px;">PHP</a> <a href="/mousejerry/tags/apache/" style="font-size: 10px;">apache</a> <a href="/mousejerry/tags/express/" style="font-size: 10px;">express</a> <a href="/mousejerry/tags/js/" style="font-size: 13.33px;">js</a> <a href="/mousejerry/tags/node-js/" style="font-size: 10px;">node.js</a> <a href="/mousejerry/tags/php/" style="font-size: 16.67px;">php</a> <a href="/mousejerry/tags/python/" style="font-size: 10px;">python</a> <a href="/mousejerry/tags/vscode-%E6%8F%92%E4%BB%B6/" style="font-size: 10px;">vscode,插件</a> <a href="/mousejerry/tags/vue/" style="font-size: 20px;">vue</a> <a href="/mousejerry/tags/vuex/" style="font-size: 10px;">vuex</a> <a href="/mousejerry/tags/webpack/" style="font-size: 10px;">webpack</a> <a href="/mousejerry/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 10px;">前端</a> <a href="/mousejerry/tags/%E5%90%8E%E7%AB%AF/" style="font-size: 10px;">后端</a> <a href="/mousejerry/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 10px;">微信小程序</a> <a href="/mousejerry/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size: 10px;">数据结构</a> <a href="/mousejerry/tags/%E6%B5%8B%E8%AF%95/" style="font-size: 10px;">测试</a> <a href="/mousejerry/tags/%E7%88%AC%E8%99%AB/" style="font-size: 10px;">爬虫</a> <a href="/mousejerry/tags/%E9%9A%8F%E7%AC%94/" style="font-size: 10px;">随笔</a>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E6%8A%80%E5%B7%A7%E5%AD%A6%E4%B9%A0/">技巧学习</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E8%87%AA%E5%B7%B1%E5%AD%A6%E4%B9%A0/">自己学习</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E8%AF%BE%E5%A0%82%E5%AD%A6%E4%B9%A0/">课堂学习</a><span class="category-list-count">5</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/08/10/test/" class="thumbnail">
    
    
        <span style="background-image:url(https://ejs.bootcss.com/assets/images/jake_display.png)" alt="test" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/mousejerry/2020/08/10/test/" class="title">test</a></p>
                            <p class="item-date"><time datetime="2020-08-10T01:15:21.000Z" itemprop="datePublished">2020-08-10</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/08/05/Vue-Router%E5%B0%8F%E6%8B%93%E5%B1%95/" class="thumbnail">
    
    
        <span style="background-image:url(https://ejs.bootcss.com/assets/images/jake_display.png)" alt="Vue Router知识小补充" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E8%87%AA%E5%B7%B1%E5%AD%A6%E4%B9%A0/">自己学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/08/05/Vue-Router%E5%B0%8F%E6%8B%93%E5%B1%95/" class="title">Vue Router知识小补充</a></p>
                            <p class="item-date"><time datetime="2020-08-05T01:17:50.000Z" itemprop="datePublished">2020-08-05</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/07/28/php%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E8%AF%BE%E5%A0%82%E5%AD%A6%E4%B9%A0/">课堂学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/07/28/php%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0/" class="title">php数组的常用函数</a></p>
                            <p class="item-date"><time datetime="2020-07-28T01:58:18.000Z" itemprop="datePublished">2020-07-28</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/07/24/php%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E6%8A%80%E5%B7%A7%E5%AD%A6%E4%B9%A0/">技巧学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/07/24/php%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" class="title">php开发环境搭建</a></p>
                            <p class="item-date"><time datetime="2020-07-24T07:28:40.000Z" itemprop="datePublished">2020-07-24</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/07/23/vscode%E9%85%8D%E7%BD%AEphpcs/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E6%8A%80%E5%B7%A7%E5%AD%A6%E4%B9%A0/">技巧学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/07/23/vscode%E9%85%8D%E7%BD%AEphpcs/" class="title">vscode配置phpcs</a></p>
                            <p class="item-date"><time datetime="2020-07-23T09:06:35.000Z" itemprop="datePublished">2020-07-23</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>


    
        
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/08/">八月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/07/">七月 2020</a><span class="archive-list-count">8</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/06/">六月 2020</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/05/">五月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/04/">四月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/03/">三月 2020</a><span class="archive-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/PHP/" rel="tag">PHP</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/apache/" rel="tag">apache</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/express/" rel="tag">express</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/js/" rel="tag">js</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/node-js/" rel="tag">node.js</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/php/" rel="tag">php</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/python/" rel="tag">python</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/vscode-%E6%8F%92%E4%BB%B6/" rel="tag">vscode,插件</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/vue/" rel="tag">vue</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/vuex/" rel="tag">vuex</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/webpack/" rel="tag">webpack</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E5%90%8E%E7%AB%AF/" rel="tag">后端</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" rel="tag">微信小程序</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" rel="tag">数据结构</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E6%B5%8B%E8%AF%95/" rel="tag">测试</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E7%88%AC%E8%99%AB/" rel="tag">爬虫</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E9%9A%8F%E7%AC%94/" rel="tag">随笔</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a target="_blank" rel="noopener" href="http://hexo.io">Hexo</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>
            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2020 smalljerry<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a target="_blank" rel="noopener" href="http://github.com/ppoffice">Hexo</a>
            .<br/><a target="_blank" rel="noopener" href="http://github.com/ghaseminya"></a>

            <a href="">lala</a>
        </div>
    </div>
</footer>

        
    
    <script>
    var disqus_config = function () {
        
            this.page.url = 'http://dsjerry.gitee.io/mousejerry/2020/04/18/webpack-D1/';
        
        this.page.identifier = 'webpack-D1';
    };
    (function() { 
        var d = document, s = d.createElement('script');  
        s.src = '//' + 'dsjerry' + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>



    
        
<script src="/mousejerry/libs/lightgallery/js/lightgallery.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-thumbnail.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-pager.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-autoplay.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-fullscreen.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-zoom.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-hash.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-share.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-video.min.js"></script>

    
    
        
<script src="/mousejerry/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>

    



<!-- Custom Scripts -->

<script src="/mousejerry/js/main.js"></script>


    </div>
</body>
</html>